<template>
  <view class="welcomePage">
    <view v-if="userInfo.baseUserInfoState !== 'Disable'">
      <u-sticky bgColor="#fff" class="welcomePage__sticky">
        <u-tabs
          :list="tabsList"
          :scrollable="false"
          @click="changeTabs"
          :activeStyle="{
            color: '#1C1B26',
            fontWeight: 'bold',
            transform: 'scale(1.2)',
          }"
          :inactiveStyle="{
            color: '#333333',
            transform: 'scale(1.05)',
          }"
          lineColor="#A22C26"
        ></u-tabs>
      </u-sticky>
      <u-transition :show="activityTag == 'today'" mode="fade-left">
        <today ref="today"></today>
      </u-transition>
      <u-transition :show="activityTag == 'fourOrder'" mode="fade-left">
        <fourOrder v-if="activityTag == 'fourOrder'"></fourOrder>
      </u-transition>
      <u-transition :show="activityTag == 'business'" mode="fade-right">
        <businessModel></businessModel>
      </u-transition>

      <!-- <performance v-if="activityTag == 'performance'"></performance> -->

      <!-- <businessModel v-if="activityTag == 'business'"></businessModel> -->

      <!-- <customerList v-if="activityTag == 'fourOrder'"></customerList> -->
      <!-- <view @click="gotoReview">进入</view> -->
      <!-- 隐私协议 -->
      <!-- #ifdef MP-WEIXIN -->
      <privacy-popup ref="privacyComponent"></privacy-popup>
      <!-- #endif -->
    </view>
    <view v-else>
      <u-empty mode="permission"> </u-empty>
    </view>
  </view>
</template>

<script>
import store from "../../store/index";
import today from "./components/today.vue";
import performance from "./components/performance.vue";
import customerList from "./components/customerList.vue";
import fourOrder from "./components/fourOrder.vue";
import businessModel from "./components/businessModel.vue";
export default {
  components: {
    today,
    performance,
    customerList,
    fourOrder,
    businessModel,
  },
  data() {
    return {
      tabsList: [
        {
          name: "今天",
          val: "today",
        },
        {
          name: "客资到链接",
          val: "fourOrder",
        },
        {
          name: "商学院",
          val: "business",
        },
        // {
        //   name: "业绩排名",
        //   val: "performance",
        // },
        //{
        //  name: "课表",
        //  val: "schedule",
        //},
      ],
      activityTag: "today",
    };
  },
  computed: {
    hasLogin() {
      return this.$store.state.token && this.$store.state.token.length > 0;
    },
  },
  methods: {
    /**
     * tag标签选择回调
     * @param val 选择的对象返回
     * @returns
     */
    changeTabs(val) {
      this.activityTag = val.val;
      console.log(this.userInfo, "userInfo");
    },
    /**
     * 跳转到首页
     */
    gotoIndex() {
      if (this.hasLogin) {
        store.commit("setFirstCome", false);
        uni.navigateTo({
          url: "/pages/index/index",
        });
      } else {
        uni.navigateTo({
          url: "/pages/index/index",
        });
        // this.toLogin();
      }
    },
    /**
     * 跳转到登录页面
     */
    toLogin() {
      uni.navigateTo({
        url: "/pages/user/login",
      });
    },
  },
  onShow() {
    console.log(this.imgUrl, "onShow");
    uni.$on("refreshSubmit", this.emitRefreshData);
    this.$refs.today.upload();
    console.log(this.userInfo, "userInfo");
  },
};
</script>
<style>
page {
  background-color: #f5f7fa;
}
</style>
<style lang="scss" scoped>
.welcomePage {
  // 强制覆盖uView默认布局
  ::v-deep .u-tabs__wrapper {
    padding-bottom: 18rpx !important;
  }
  ::v-deep .u-tabs__wrapper__nav__item {
    flex: 0 0 auto !important;
    justify-content: flex-start !important;
    padding: 0 20rpx !important;
  }
  .welcomePage__sticky {
    padding-bottom: 10rpx;
  }
}
</style>